import React,{useState,useEffect} from 'react'
import './lfr_detail.css'
import axios from 'axios'
import { LeftOutline, UploadOutline,PhoneFill,LocationFill,SmileOutline   } from 'antd-mobile-icons'
import {useLocation,useNavigate } from 'react-router-dom'
import { Rate, Space, Toast } from 'antd-mobile'



export default function Detail() {
  const [list, setlist] = useState([])
  const {state}=useLocation()
  const [falg,setfalf]=useState('')
  const [Height, setHeight] = useState(null);
  const navigate=useNavigate()

  const getlist = () => {
    axios.get(`http://127.0.0.1:3000/lfr_index/detail?ids=${state.id}`).then(res => {
     
      setlist(res.data.data)
      console.log(res.data.data[0].roomid);
    })
  }

  useEffect(()=>{
    getlist()
    const handleScroll = () => {
      const pageHeight = document.documentElement.clientHeight; 
      const scrollPosition = window.scrollY;
      console.log('Page height:', pageHeight);
      console.log('Scroll position:', scrollPosition);
      setHeight(scrollPosition)
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
      window.removeEventListener('scroll', handleScroll);
  };
  },[])

  return (
    <div className='bll'>
      <img src={list.map(item=>item.img)} className='img1'></img>
      <div className='divc1'>
          <p onClick={()=>{navigate('/list')}} ><LeftOutline   /></p>
          <p ><UploadOutline  /></p>
      </div>
      <div className='divc2'>
         {
          list.map(item=>{
            return  <div className='db1' key={item._id}>
            <div className='p1'>
              <p className='pp1'>{item.name}</p>
              <div>
              <Rate className='span' count={1}  onChange={val => {setfalf(val.toString())}} />
              <p className='p2'>{falg==0?'收藏':'已收藏'}</p>
              </div>
            </div>
            <p><LocationFill />{item.address}</p>
            <p><PhoneFill />{item.phone}</p>
          </div>
          })
         }
         <div className='db2'>
          <p className='dp1'>{state.da} <span>入住</span></p>
          <p className='dp2'>{state.nights}晚</p>
          <p className='dp1'>{state.db} <span>离店</span></p>
         </div>
         {
          list.map(item=>{
            return <div key={item._id} className='dbb'>
               {item.roomid.map(items=>{
                return <div className='db3'>
                  <img src={items.img}></img>
                  <ul>
                    <li>{items.name}</li>
                    <li className='li1'>不含早|即时确认|不允许取消</li>
                    <li className='li'> ￥{items.price}</li>
                    <li className='li2'><button onClick={()=>{
                      navigate('/buy',{state:{item:item,items:items.name,price:items.price,da:state.da,db:state.db,nights:state.nights}})
                    }}>预定</button></li>
                  </ul>
                </div>
               })}
            </div>
          })
         }
         
      </div>
      <div className={Height>0?'diva1':'s'}>
          <p onClick={()=>{navigate('/list')}} ><LeftOutline  className='tb' /></p>
          <p>{list.map(item=>item.name)}</p>
          <p ><UploadOutline className='tb' /></p>
      </div>
    </div>
  )
}
